<!DOCTYPE html>

<html>
    
    <head>
        <meta charset="UTF-8">
        <title>Latex Test | Google API</title>
        <style>
            * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
                font-family: "Meiryo", Arial, Helvetica, sans-serif;
                line-height: 1.5em;
            }
            body {
                font-size: 12px;
            }
            #contents {
                display: -webkit-box;
                display: -moz-box;
                display: -o-box;
                display: box;
            }
            #contents>* {
                width: 50%;
                padding: 10px;
            }
            #text, #result {
                width: 100%;
            }
            table {
                width: 100%;
            }
            table, tr, td {
                border: 1px solid #aaa;
            }
            tr, td {
                padding: 5px 10px;
            }
            table * {
                font-family: 'Consolas', 'Monaco', 'ＭＳ ゴシック';
            }
            
            tr:nth-child(odd) {
                background-color: hsl(216, 100%, 95%);
            }
            th {
                background-color: hsl(216, 100%, 25%);
                color: hsl(216, 100%, 95%);
                font-size: 20px;
            }
            input {
                width: 100%;
            }
        </style>
        <script>
            var $id     = function(id)  { return document.getElementById(id); };
            var $create = function(tag) { return document.createElement(tag); };
            
            window.addEventListener("load", function()
            {
                $id("text").addEventListener("keyup", run);
                $id("size").addEventListener("keyup", run);
                $id("size").addEventListener("change", run);
                $id("background").addEventListener("keyup", run);
                $id("color").addEventListener("keyup", run);
                run();
            });
            
            var run = function()
            {
                var eResult = $id("result");
                var eResultBody = eResult.getElementsByTagName("tbody")[0];
                eResultBody.innerHTML = "";
                
                var eText = $id("text");
                var textList = eText.value.split("\n");
                
                for (var i=0,len=textList.length;i<len;++i) {
                    var text    = textList[i];
                    if (text == "") continue ;
                    eResultBody.appendChild( createLaTeXTableRow(text, $id("background").value, $id("color").value, $id("size").value) );
                }
            };
            
            var createLaTeXImg = function(text, bgColor, color, size)
            {
                var img = $create("img");
                img.alt = text;
                img.src = "http://chart.apis.google.com/chart?cht=tx" +
                    "&chf=bg,s," + bgColor +
                    "&chco=" + color +
                    "&chs=" + size +
                    "&chl=" + encodeURIComponent(text);
                
                return img;
            };
            
            var createLaTeXTableRow = function(text, bgColor, color, size)
            {
                var tr  = $create("tr");
                var td  = $create("td");
                var img = createLaTeXImg(text, bgColor, color, size);
                var a   = $create("a");
                a.href = img.src;
                a.appendChild(img);
                td.appendChild(a);
                tr.appendChild(td);
                
                var input = $create("input");
                input.type = "text";
                input.value = a.outerHTML;
                input.style.width = "100%";
                input.onclick = function() { this.select(); }
                td = $create("td");
                td.appendChild(input);
                tr.appendChild(td);
                
                return tr;
            };
        </script>
    </head>
    
    <body>
        <h1>Latex Test | Google API</h1>
        <div id="contents">
            <section>
                <h2>INPUT</h2>
                <p>
                    テキストエリアに LaTex を打ち込んで下さい. 行単位で内容に応じて右側に画像と埋め込み用リンクを生成します.
                </p>
                <p>
                    サイズと背景色(16進数rgba)とフォントカラー(16進数rgba)も反映されます. 色々試してみてください.
                </p>
                <textarea id="text" rows=12>
\LaTeX
a^2+b^2=c^2
E = mc^2
\mathrm{e}^{\mathrm{i}\theta} = \cos(\theta) + \mathrm{i}\sin(\theta)
</textarea>
                <table>
                    <tr>
                        <th>Size</th>
                        <td>
                            <!--<input id="size" type="range" value="20" min="15" max="100" />-->
                            <input id="size" type="number" value="20" min="15" max="100" />
                        </td>
                    </tr>
                    <tr>
                        <th>Background Color</th>
                        <td><input id="background" type="text" value="ffffff00" /></td>
                    </tr>
                    <tr>
                        <th>Color</th>
                        <td><input id="color" type="text" value="000000ff" /></td>
                    </tr>
                </table>
            </section>
            <section>
                <h2>Result</h2>
                <table id="result" border=1>
                    <thead>
                        <tr>
                            <th>Image</th>
                            <th>Code</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
            </section>
        </div>
    </body>
    
</html>